<template>
  <el-dialog
    title="关联工作项"
    :visible.sync="dialogVisible"
    width="1266px"
    :modal="false"
    :close-on-click-modal="false"
    :before-close="handleClose">
    <div class="selectWork">已选择 <span class="red-text">{{ selectionList.length }}</span> 项关联工作项</div>
    <el-form :model="ruleForm" ref="ruleForm" label-width="85px" class="demo-ruleForm">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="归属项目" prop="ascription">
            <el-select v-model="ruleForm.ascription" placeholder="选择工作项">
              <el-option
                v-for="item in ascriptionOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工作项类型" prop="ascription">
            <el-select v-model="ruleForm.workType" placeholder="选择工作项类型">
              <el-option
                v-for="item in workTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-input
            style="width: 80%"
            placeholder="查找工作项"
            prefix-icon="el-icon-search"
            v-model="ruleForm.queryWork">
          </el-input>
          <el-button type="primary" @click="query" size="small">查找</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      v-loading="loading"
      ref="loopRef"
      :header-cell-style="{'background-color': '#F9F9F9'}"
      :data="configList"
      @selection-change="handleSelectionChange"
      style="width: 97%;margin-left: 15px"
      border>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="工作项名称" align="left" prop="cPmNme" sortable width="260">
        <template slot-scope="scope">
          <img src="@/assets/images/xq-xz.png" class="icon img-correct" />{{ scope.row.cPmNme }}
        </template>
      </el-table-column>
      <el-table-column label="工作项类型" align="center" prop="cPmType" width="120">
        <template slot-scope="scope">
          {{ handelCPmType(scope.row.cPmType) }}
        </template>
      </el-table-column>
      <el-table-column label="优先级" align="center" prop="cPmPri" width="120" sortable>
        <template slot-scope="scope">
          <div class="highest" v-if="scope.row.cPmPri == 1">
            <div class="icon red2"></div>最高
          </div>
          <div class="highest" v-if="scope.row.cPmPri == 2">
            <div class="icon orange"></div>较高
          </div>
          <div class="highest" v-if="scope.row.cPmPri == 3">
            <div class="icon blue"></div>普通
          </div>
          <div class="highest" v-if="scope.row.cPmPri == 4">
            <div class="icon gray"></div>较低
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="cPmState" width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.cPmState == 1" class="primary">测试提交</el-tag>
          <el-tag v-if="scope.row.cPmState == 2" type="warning">进行中</el-tag>
          <el-tag v-if="scope.row.cPmState == 3" type="success">已完成</el-tag>
          <el-tag v-if="scope.row.cPmState == 4">测试通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="cCrePer" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.cCrePerNme">
            <span class="icon-name red">{{ scope.row.cCrePerNme[scope.row.cCrePerNme.length - 1] }}</span>
            <span>{{ scope.row.cCrePerNme }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="tCreTm" sortable>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.tCreTm) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="tUpdTm" sortable>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.tUpdTm) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="done">完成</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {list} from "@/api/projectManage/workItem";
import {mixin} from "@/views/projectManage/mixin";

export default {
  name: "correlationWorkItem",
  mixins: [mixin],
  data() {
    return {
      ruleForm: {},
      dialogVisible: false,
      workTypeOption: [
        {
          label: '全部',
          value: 1
        },
        {
          label: '需求',
          value: 2
        },
        {
          label: '任务',
          value: 3
        },
        {
          label: '缺陷',
          value: 4
        }
      ],
      loading: false,
      configList: [],
      selectionList: []
    }
  },
  methods: {
    open() {
      this.getList()
      this.getListName()
      this.dialogVisible = true
    },
    getList() {
      list().then(res => {
        this.configList = res.rows || []
      })
    },
    handleClose() {
      this.ruleForm = {}
      this.selectionList = []
      this.$refs.loopRef.clearSelection()
      this.dialogVisible = false
    },
    done() {
      this.$emit('selection', this.selectionList)
      this.handleClose()
    },
    query() {
      console.log(this.ruleForm)
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectionList = selection
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 10px 20px;
}
::v-deep .demo-ruleForm {
  .el-select, .el-input__inner {
    width: 302px;
    text-align: left;
  }
}
.selectWork {
  padding: 20px 15px;
  font-size: 16px;
  font-weight: bold;
  color: #333333
}
.highest {
  position: relative;
  .icon {
    position: absolute;
    top: 8px;
    left: 23px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
}
</style>
